<template>
    <div class="tableList">
        <el-table :data="tableData" border style="width: 100%;"
            :header-cell-style="{background:'#fafafa',color:'#000',fontWeight:400,fontSize:'12px'}"
            :cell-style="{color:'#5a5a5a',fontSize:'12px',fontWeight:400}" v-loading="loading"
            element-loading-text="加载中" element-loading-background="rgba(250, 250, 250, 0.5)"
            element-loading-spinner="el-icon-loading" ref="tabList">
            <el-table-column label="序号" width="80">
                <template slot-scope="scope">
                    <span>{{(searchForm.page - 1) * (searchForm.limit) + scope.$index + 1}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="code" label="单据编号">
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间">
            </el-table-column>
            <el-table-column prop="updateTime" label="最后更新时间">
            </el-table-column>
            <el-table-column prop="createName" label="创建人">
            </el-table-column>
            <el-table-column prop="updateName" label="修改人">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="150">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="edit(scope.row.id,'edit')">编辑
                    </el-button>
                    <el-button type="text" size="small" @click="edit(scope.row.id,'copy')">复制</el-button>
                    <el-popconfirm placement='top' confirm-button-text='删除' @confirm='confirmDel(scope.row.id)' title="确认删除销售订单？
                        操作将同时删除关联的工单、任务和报工，删除后不可恢复">
                        <el-button slot="reference" type="text" size="small" style="margin-left:10px">删除</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
            <div slot="empty">
                <el-empty :image-size='100'></el-empty>
            </div>
        </el-table>
        <el-pagination v-if="total" @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :page-sizes="[10,20,50,100]" :page-size="searchForm.limit" layout="total,prev, pager, next,sizes,jumper"
            :total="total" background :current-page="searchForm.page">
        </el-pagination>
    </div>
</template>

<script>
    import {
        formList,
        formDel
    } from '@/api/produceController'
    export default {
        data() {
            return {
                tableData: [],
                loading: false,
                total: 0,
            }
        },
        props: {
            searchForm: {
                type: Object,
                default: () => ({})
            }
        },
        mounted(){  
            if (this.$store.state.router === this.$route.path) {
                this.searchForm.page = this.$store.state.page || 1;
            }          
            this.getFormList(this.searchForm)
        },
        methods: {
            //列表
            getFormList(data) {
                this.loading = true
                formList(data).then(res => {
                    if (res.code == 200) {
                        this.tableData = res.data.records
                        this.total = res.data.total
                    }
                    this.loading = false
                })
            },
            //删除
            getFormDel(data) {
                formDel(data).then(res => {
                    if (res.code == 200) {
                        this.getFormList(this.searchForm)
                        this.utils.showMsg('删除成功', 'success')
                    }
                })
            },
         
            //删除 
            confirmDel(id) {
                this.getFormDel({
                    id
                })
                let totalPage = Math.ceil((this.total - 1) / this.searchForm.limit)
                let currentPage = this.searchForm.page > totalPage ? totalPage : this.searchForm.page
                this.searchForm.page = currentPage < 1 ? 1 : currentPage
            },
            //编辑--复制
            edit(id,url) {
                this.$store.commit('setPage', this.searchForm.page);
                this.$store.commit('setRouter', this.$route.path);
                this.$router.push({
                    path: `/productionManagement/salesOrder/${url}`,
                    query: {
                        id
                    }
                })
            },
            //pageSize 改变时会触发
            handleSizeChange(val) {
                this.searchForm.limit = val
                this.getFormList(this.searchForm)
            },
            //currentPage 改变时会触发
            handleCurrentChange(val) {
                this.searchForm.page = val
                this.getFormList(this.searchForm)
            },
        },
    }
</script>

<style lang="less" scoped>
    .tableList {
        padding: 0 20px;

        code {
            font-family: sans-serif;
        }
    }
</style>